<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import * as echarts from 'echarts'
const route = useRoute()
const isNull = ref(false)
// eslint-disable-next-line no-unused-vars
const name = route.query.source
const examCode = route.query.examCode
const category = ref({

  '90分及以上': ref(0),
  '80-89分': ref(0),
  '70-79分': ref(0),
  '60-69分': ref(0),
  '60分以下': ref(0)
})

onMounted(() => {
  getScoreInfo()
})
const getScoreInfo = () => {
  axios.get('api/scorecontroller/findByExamCode/' + examCode).then(res => {
    const data = res.data
    if (data.length > 0) {
      console.log(data)
      const charts = echarts.init(document.getElementById('box'))
      data.forEach((element, index) => {
        switch (Math.floor(element.etScore / 10)) {
          case 9:
            category.value['90分及以上']++
            break
          case 8:
            category.value['80-89分']++
            break
          case 7:
            category.value['70-79分']++
            break
          case 6:
            category.value['60-69分']++
            break
          default:
            category.value['60分以下']++
        }
      })
      const option = {
        title: {
          text: `${name}分数段图`,
          subtext: '分数段饼图',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a}：{b} <br/> {c}人 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['90分及以上', '80-89分', '70-79分', '60-69分', '60分以下']
        },
        series: [
          {
            name: '分数段',
            type: 'pie',
            radius: '35%',
            center: ['50%', '35%'],
            data: [
              { value: category.value['90分及以上'], name: '90分及以上' },
              { value: category.value['80-89分'], name: '80-89分' },
              { value: category.value['70-79分'], name: '70-79分' },
              { value: category.value['60-69分'], name: '60-69分' },
              { value: category.value['60分以下'], name: '60分以下' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      charts.setOption(option)
    } else {
      isNull.value = true
    }
  })
}
</script>

<template>
<div class="part" >
    <div id="box" ></div>
    <div v-if="isNull">
      <span>该门考试还没人参考哦,请提醒学生参加考试。</span>
    </div>
  </div>
</template>

<style lang="less" scoped>

  #box {
    width: 800px;
    height: 800px;
    margin-left: 40px;
  }

</style>
